import React, { useEffect } from "react"
import { Table, Button, Space } from "antd"
import { TableToolbar } from "app/components"
import {
  DeleteOutlined,
  PlusOutlined,
  DownloadOutlined
} from "@ant-design/icons"

import { useDict } from "./useDict"
import EditModal from "./EditModal"
import { ColumnType } from "antd/es/table"
import dayjs from "dayjs"

const Dict: React.FC = () => {
  const {
    getList,
    submitForm,
    handleDelete,
    loading,
    total,
    dataSource,
    selectedRowKeys,
    setSelectedRowKeys,
    queryParams,
    setQueryParams,
    initForm,
    form,
    setForm,
    modalConfig,
    setModalConfig
  } = useDict()

  useEffect(() => {
    getList()
  }, [queryParams.pageNum, queryParams.pageSize])

  const componentProps = [
    {
      col: 5,
      key: "dictTypeName",
      type: "input",
      label: "字典名称",
      labelwidth: 90,
      placeholder: "请输入字典名称"
    },
    {
      col: 5,
      key: "dictType",
      type: "select",
      label: "字典类型",
      labelwidth: 90,
      placeholder: "请输入字典类型"
    },
    {
      col: 4,
      key: "status",
      type: "select",
      label: "状态",
      labelwidth: 40,
      placeholder: "请选字典状态"
    }
  ]

  const openModal = (row) => {
    setForm(row.postId ? { ...row } : { ...initForm })
    setModalConfig({ ...modalConfig, visible: true })
  }

  const columns: ColumnType<any>[] = [
    {
      title: "序号",
      width: 80,
      render: (text, record, index) => `${index + 1}`
    },
    {
      title: "字典编号",
      align: "center",
      dataIndex: "dictTypeId",
      key: "dictTypeId"
    },
    {
      title: "字典名称",
      align: "center",
      dataIndex: "dictTypeName",
      key: "dictTypeName"
    },
    {
      title: "字典类型",
      align: "center",
      dataIndex: "dictType",
      key: "dictType"
    },
    {
      title: "状态",
      align: "center",
      dataIndex: "status",
      key: "status"
    },
    {
      title: "备注",
      align: "center",
      dataIndex: "remark",
      key: "remark"
    },
    {
      title: "创建时间",
      align: "center",
      render: (text, row) => (
        <span>{dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")}</span>
      )
    },
    {
      title: "操作",
      width: 100,
      align: "center",
      key: "action",
      render: (text, row) => (
        <Space size="small">
          <Button type="link" block onClick={() => openModal(row)}>
            修改
          </Button>
          <Button type="link" block onClick={() => handleDelete([row.postId])}>
            删除
          </Button>
        </Space>
      )
    }
  ]

  const buttonProps = [
    {
      label: "新增",
      icon: <PlusOutlined />,
      onClick: openModal
    },
    {
      label: "删除",
      danger: true,
      icon: <DeleteOutlined />,
      onClick: () => handleDelete(selectedRowKeys)
    },
    {
      label: "导出",
      icon: <DownloadOutlined />,
      onClick: () => console.log("edit")
    },
    {
      label: "清理缓存",
      icon: <DownloadOutlined />,
      onClick: () => console.log("edit")
    }
  ]

  // 表格勾选
  const onSelectChange = (rowKeys) => {
    setSelectedRowKeys(rowKeys)
  }

  const changePage = (pageNum, pageSize) => {
    setQueryParams({ ...queryParams, pageNum, pageSize })
  }

  return (
    <>
      <TableToolbar
        getList={getList}
        queryParams={queryParams}
        setQueryParams={setQueryParams}
        buttonProps={buttonProps}
        componentProps={componentProps}
      />
      <Table
        rowKey="postId"
        loading={loading}
        dataSource={dataSource}
        columns={columns}
        rowSelection={{
          selectedRowKeys,
          onChange: onSelectChange
        }}
        pagination={{
          total,
          current: queryParams.pageNum,
          defaultPageSize: queryParams.pageSize,
          onChange: changePage
        }}
      />

      <EditModal
        form={form}
        setForm={setForm}
        modalConfig={modalConfig}
        setModalConfig={setModalConfig}
        submitForm={submitForm}
      />
    </>
  )
}

export default Dict
